<script setup lang="ts">
import { ref, Ref } from 'vue'
// !1. 通过泛型参数规定的是 ref 值的类型
// const money = ref<number>(100)
// !2. 通过 Vue 内置的泛型工具可以规定初始值的类型
// const money: Ref<number> = ref(100)
// !3. 一般情况指定了初始值，可以省略类型，利用它自身类型推导的能力
// const money = ref(100)
// !4. 什么时候一定要指定类型呢？
// const list = ref([])
// 解决：指定默认值，TS 能根据默认值进行推导
// const list = ref([{ id: 1, name: 'xxx', age: 888 }])
// 解决：手动指定类型

// type TItem = { id: number, name: string, age: number }
interface IItem { id: number, name: string, age: number }
const list = ref<IItem[]>([])
// const list: Ref<IItem[]> = ref([])

// const o: {} = {name: 'ifer', age: 18}

setTimeout(() => {
  list.value = [{
    id: 1,
    name: 'zs',
    age: 18
  }, {
    id: 2,
    name: 'ls',
    age: 28
  }]
}, 2000)

</script>
<template>
  <ul>
    <li v-for="item  in list" :key="item.id"> {{ item.name }}</li>
  </ul>
</template>
